<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/element-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="lib/element-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/ask.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <title>方案解决系统</title>
</head>
<body>
<div id="app">
    <header>
        <div class="header">
            <div><a href="/"><img class="img-logo" src="lib/logo1.png" alt=""></a></div>
            <div class="plane-login">
                <div v-show="islogin==0">
                    <a href="#" @click="showLoginWindow=true">登录</a> | <a href="">注册</a>
                </div>
                <div v-show="islogin==1">

                    <el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal">
                        <el-submenu index="2">
                            <template slot="title"><img
                                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt=""
                                    class="nav-avatar">{{userinfo.name}}
                            </template>
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                            <el-menu-item index="2-2">设置</el-menu-item>
                            <el-menu-item index="2-3" @click="exit">退出登录</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="content">
            <div class="ask-title">
                <h1 v-cloak> {{askData.title}}</h1>
            </div>
            <div class="ask-meta">
                <div class="ask-meta-info">
                    <el-tag effect="dark" hit="true" style="border: none"
                            size="mini" :color="askData.classcolor">{{askData.classname}}
                    </el-tag>
                    <span class="ask-meta-span"><i class="el-icon-user-solid"></i> {{askData.username}}</span>
                    <span class="ask-meta-span ask-creattime"> <i class="el-icon-time"></i> {{askData.creattime}}</span>
                </div>
                <div class="ask-control" v-show="askData.userid==askData.own">
                    <i class="el-icon-edit-outline">编辑</i>
                    <i class="el-icon-delete" @click="delask">删除</i>
                </div>
            </div>
            <div class="ask-content" v-html="askData.content">

            </div>
        </div>
        <transition name="el-zoom-in-center">
            <div class="window-plane-login" v-show="showLoginWindow">
                <div class="box-mask"></div>
                <div class="box-login">
                    <div class="plane-login-title">
                        <div><b>登录账户</b></div>
                        <div @click="closeLoginPlane"><i class="el-icon-close close"></i></div>
                    </div>
                    <div class="box-login-form">
                        <div class="form-item">
                            <el-input v-model="form.user" placeholder="账号"></el-input>
                        </div>

                        <div class="form-item">
                            <el-input v-model="form.pass" placeholder="密码" show-password></el-input>
                        </div>
                        <div class="form-item form-set-right">
                            <a href="#">忘记密码</a> | <a href="#">无法登录</a>
                        </div>
                        <div class="form-item form-set-right">
                            <el-button type="primary" @click="login">登录</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </main>
    <footer class="fixed-bottom">
        <div class="plane-footer">
            方案解决系统 code by XDwanj
        </div>
    </footer>
    <script>

      (function ($) {
        $.getUrlParam = function (name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        }
      })(jQuery);
      var vue = new Vue({
            el: '#app',
            mounted() {
              this.init()
            },
            data: {
              test: '啊啊啊',
              askData: {},
              form: {
                user: '',
                pass: ''
              },
              menuActiveIndex: 1,
              islogin: 0,
              userinfo: {
                name: ''
              },
              showLoginWindow: false
            },
            methods: {
              init() {

                if ($.getUrlParam('ask') == null) {
                  return;
                }
                var that = this;
                $.get('/user/loginInfo.do', function (data) {
                  if (data != 0) {
                    var obj = JSON.parse(data);
                    that.islogin = 1;
                    that.userinfo.name = obj.username;
                  }
                });
                $.get('/post/getAsk.do', {id: $.getUrlParam('ask')}, function (data) {
                  if (data == null) {
                    console.log("无数据");
                    window.location.href = '/pages/error/404.html';
                  }
                  var obj = data;
                  obj.content = htmlDecode(obj.content);


                  let d = new Date(obj.creattime);
                  let date = (d.getFullYear()) + "-" +
                      (d.getMonth() + 1) + "-" +
                      (d.getDate()) + " " +
                      (d.getHours()) + ":" +
                      (d.getMinutes()) + ":" +
                      (d.getSeconds());
                  obj.creattime = date;
                  that.askData = obj;

                  console.log(obj);
                })
              },
              delask() {
                var that = this;
                this.$confirm('此操作将永久删除方案, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  $.post("/post/delask", {id: that.askData.id}, function (data) {
                    var obj = JSON.parse(data);
                    if (obj.code == 0) {
                      this.$message({
                        message: obj.msg,
                        type: 'warning'
                      });
                    } else {
                      this.$message({
                        message: obj.msg,
                        type: 'success'
                      });
                      setTimeout(function () {
                        window.location.href = "/";
                      }, 2000);

                    }

                  })
                })
              }
              ,
              login() {
                that = this;
                $.post('/user/login.do', {user: that.form.user, pass: $.md5(that.form.pass)}, function (data) {
                  if (data == 1) {
                    that.$message({type: 'success', message: '登录成功'});
                    setTimeout(function () {
                      window.location.reload();
                    }, 3000);
                  } else {
                    that.$message({type: 'error', message: '账号或者密码错误'});
                  }

                })
              },
              exit() {
                that = this;
                $.get('/user/exit.do', function (data) {
                  if (data == 1) {
                    that.$message({message: '已退出'});
                    setTimeout(function () {
                      window.location.reload();
                    }, 1000);
                  } else {
                    that.$message({type: 'error', message: '退出失败'});
                  }
                })
              },
              closeLoginPlane() {
                this.showLoginWindow = false;
              }
            }
          })
      ;

      //Html解码获取Html实体
      function htmlDecode(value) {
        return $('<div/>').html(value).text();
      }
    </script>
</div>
</body>
</html>